.operateBox{
	@include flexLeft;
	overflow: hidden;
	&-flex{
		@include flexBetween;
		position: relative;
	}
	&-flexBeTtile{
		@include flexCenter;
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 24rpx;
		cursor: pointer;
	}
	&-beTtile{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3080D3;
		margin-left: 20rpx;
	}
	&-bg{
		width: 55%;
		height: 100vh;
		background: #F6FCFF;
		position: relative;
		image{
			// width: 40%;
			width: 825rpx;
			height: 582rpx;
			position: absolute;
			left: 0;right: 0;
			top: 50%;
			transform: translateY(-50%);
			margin: auto;
		}
	}
	&-headerTitle{
		font-size: 52rpx;
		font-family: Overpass-ExtraBold, Overpass;
		font-weight: 800;
		color: #444B59;
		margin-bottom: 32rpx;
	}
	&-tabs{
		@include flexLeftColumn;
		width: 45%;
		padding: 0 280rpx;
		height: 100vh;
		background: #FFFFFF;
		&-item{
			@include flexLeft;
			align-items: flex-end;
			margin: 0 0 54upx;
			&__title{
				width: 26%;
				color: $globalColor-fontStyle;
				font-size: 28upx;
				font-weight: bold;
				position: relative;
				padding-bottom: 6upx;
				&--active::before{
					content: '';
					width: 36upx;
					height: 6upx;
					background: $globalColor-style;
					position: absolute;
					bottom: 0;
					transform: translateX(50%);
				}
			}
		}
	}
	&-blackBox{
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 3rpx solid #3080D3;
		padding: 28rpx 20rpx 28rpx 48rpx;
		margin: 0 0 36rpx;
		@include flexLeftColumn;
	}
	&-formBox{
		width: 100%;
		&-list{
			@include flexLeft;
			width: 100%;
			&--textarea{
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 44rpx 40rpx;
				border-bottom: none;
				margin: 20rpx 0;
			}
			&-title{
				color: #333333;
				font-size: 32upx;
				font-weight: bold;
				width: 15%;
				// background: url(../../static/operate/icon-operate-next.png) no-repeat;
				// background-position: calc(100% - 20upx) center;
				// background-size: 20upx 12upx;
			}
			&-titleWords{
				@include flexLeft;
				flex-wrap: wrap;
				padding: 30upx 0;
			}
			&-words{
				font-size: 24upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				margin: 10upx 0 32upx;
				&--active{
					color: $globalColor-style;
				}
			}
			&-tips{
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-bottom: 30rpx;
			}
			&-header{
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #232529;
				padding: 0 0 18rpx;
			}
			&.showCloseBtn {
				.operateBox-formBox-list-image__clear--active{
					display: flex;
				}
			}
			input{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 48rpx;
				border: none;
				text-align: left;
			}
			textarea{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #000;
				border: none;
				height: 150upx;
			}
			&-image{
				@include flexRight;
				position: relative;
				z-index: 9;
				&__clear{
					margin-right: 14upx;
					image{
						width: 30upx;
						height: 30upx;
					}
					&--active{
						display: none;
					}
				}
				&__see{
					image{
						width: 44upx;
						height: 44upx;
					}
				}
				&__code{
					image{
						width: 150upx;
						height: 15upx;
					}
					.code{
						font-size: 26upx;
						font-family: PingFang-SC-Regular-Regular, PingFang-SC-Regular;
						font-weight: 400;
						color: #DE0101;
						border: 1px solid #DE0101;
						padding: 14upx 32upx;
						border-radius: 36upx;
						text-align: center;
						white-space: nowrap;
					}
				}
			}
		}
		&-lists{
			width: 70%;
		}
	}
	&-btn{
		position: fixed;
		bottom: 130upx;
		left: 0;right: 0;
		margin: auto;
		&--m{
			width: 100%;
		// margin: 0upx 66upx;
		}
		&-chioce{
			background: #8699DA linear-gradient(180deg, #45CAF2 0%, #3DBAE7 30%, #3BA1D7 100%);
			box-shadow: 6px 12px 18px 0px rgba(78,99,141,0.06), inset 0px 6px 18px 0px rgba(200,211,249,0.6);
			border-radius: 16rpx;
			font-size: 42rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			padding: 26rpx 0;
			font-weight: bold;
			cursor: pointer;
		}
		&-title{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #008CFF;
			margin: 20rpx auto;
			text-align: center;
		}	
	}
	
	&-bottom{
		@include flexLeft;
		&-img{
			width: 32upx;
			height: 32upx;
			margin-right: 8upx;
		}
		&-title{
			font-size: 24upx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			&-choice{
				font-size: 24upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	
	&-bottomBox{
		// margin: 15% auto 50upx;
		background: #fff;
		width: 100%;
		padding: 0 31upx;
		// position: fixed;
		// bottom: 0%;
	}
	&-bottomBoxFor{
		position: absolute;
		bottom: 5upx;
		width: 100%;
		padding: 0 31upx;
	}
	&-wordBox{
		padding: 30upx;
		&-wrapper {
			position: relative;
		}
		&-data {
			padding: 15upx 0;
			padding-right: 18%;
			font-weight: bold;
			border-bottom: 1upx solid $globalColor-border;
		}
		&-close{
			width: 60upx;
			height: 60upx;
			position: absolute;
			right: 15%;
			top: 50%;
			transform: translateY(-50%);
			background: url(@/static/public/icon-clear.png) no-repeat;
			background-size: 28upx 28upx;
			background-position: center center;
		}
		&-copy{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			background: $globalColor-style;
			padding: 8upx 15upx;
			color: $globalColor-white;
			border-radius: 20upx;
			white-space: nowrap;
			letter-spacing: 4upx;
			font-size: 28upx;
		}
	}
	&-titleBox{
		@include flexLeftColumn;
		&__title{
			@include flexLeft;
			margin-bottom: 8upx;
			.title{
				font-size: 28upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.num{
				font-size: 28upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #B1231C;
			}
			.tips{
				font-size: 24upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.6);
			}
		}
	}
	
}

.success{
	@include flexCenterColumn;
	margin-top: 30%;
	&-image{
		image{
			width: 110upx;
			height: 110upx;
		}
	}
	&-title{
		font-size: 42upx;
		font-weight: bold;
		color: $globalColor-fontStyle;
		margin: 25upx 0 60upx;
	}
	&-wrapper{
		@include flexCenterColumn;
		&__tips{
			color: #999999;
			font-size: 24upx;
			line-height: 40upx;
		}
	}
}

@media (max-width: 1000px) {
	.operateBox{
		@include flexCenterColumn;
		&-bg{
			width: 100%;
			height: 100%;
			padding: 80rpx 0;
			image{
				position: relative;
				transform: translateY(0%);
			}
		}
		&-tabs{
			width: 100%;
			margin: 80rpx 0;
			padding: 0 80rpx;
		}
	}
}


@media (max-width: 700px) {
	page{
		background: #fff;
	}
	.operateBox{
		@include flexCenterColumn;
		&-bg{
			image{
				width: 400rpx;
				height: 300rpx;
				position: relative;
				transform: translateY(0%);
			}
		}
		&-tabs{
			width: 100%;
			margin: 0rpx 0;
			padding: 30rpx 80rpx;
			height: auto;
		}
	}
}
